<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {

          $(".article-box").click(function () {
            var articleId = $(this).attr('data-id')
            // console.log(articleId)
            window.open("/content/" + articleId, "_parent")
            // window.parent.location.href = '/content/' + articleId ;

            // window.parent.postMessage({articleId: articleId}, "http://localhost:3000/index")

          });

        })

    </script>
</head>

<body>
    <% for(let i=0; i < articleData.length; i++) { %>
    <div class="col-sm-6 col-md-6" >
        <div class="thumbnail" style="background-color: #f4f4f4; margin-top: 10px;">
            <div class="article-box" data-id="<%= articleData[i].articleId %>" style="display: flex;">
                <% let img = '/images/html.jpg' %>
                <% let art_pic =  articleData[i].image  %>
                <img src=<%=  (art_pic !== null) ?  art_pic  :  img   %>
                  alt="二维码图片" style="width: 200px; height: 150px;" />
                <div class="caption">
                    <p class="contentTopic" style="font-size: 20px;"><%= articleData[i].title %></p>
                    <h3 style="font-size:15px; width: 200px; height: 55px; display:-webkit-box;
                        -webkit-box-orient:vertical;
                        text-overflow:ellipsis;
                        -webkit-line-clamp:2;
                        overflow:hidden;">
                        <%  var reg = /<[^>]*>|<\/[^>]*>/gm; %>
                        <%= articleData[i].content.replace(reg, ""); %>
                    </h3>
                </div>
            </div>

            <div style="display: flex; margin: 15px 10px 0px 20px;">
                <p>
                    <a href="#" class="btn btn-primary" role="button" id="approve-btn">
                        <i class="glyphicon glyphicon-heart"></i>
                        赞同
                    </a>
                    <a href="#" class="btn btn-default" role="button">
                        <i class="glyphicon glyphicon-star"></i>
                        收藏
                    </a>
                    <p style="margin-left: 20px;margin-top: 5px;">
                        <i class="glyphicon glyphicon-comment"></i>
                        <%= articleData[i].comment %>条评论
                    </p>
                    <p style="margin-left: 20px;margin-top: 5px;"><%= articleData[i].pubdate %></p>
                </p>

            </div>
        </div>
    </div>
    <% } %>

</body>

</html>